import React, { PureComponent } from 'react'
import Profile from './components/Profile'
import Home from './components/Home'
import store from './store'
import './style.css'
import About from './components/About'
import Catagory from './components/Catagory'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      counter: store.getState().counter
    }
    this.unSubscribe = null
  }
  componentDidMount(){
    // 订阅
    this.unSubscribe = store.subscribe(() => {
      this.setState({
        counter: store.getState().counter
      })
    })
  }
  componentWillUnmount(){
    // 取消订阅
    this.unSubscribe()
  }
  render() {
    return (
      <div className='root'>
        <h1>我是跟组件App</h1>
        <div>
          <h2>当前计数：{this.state.counter}</h2>
        </div>
        <div className='pages'>
          <Home></Home>
          <Profile></Profile>
          <About></About>
          <Catagory></Catagory>
        </div>
      </div>
    )
  }
}

export default App